<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#area{
				width: 200px;
				height: 100px;
				border: 1px solid black;
			}
			#show{
				width: 200px;
				height: 20px;
				border: 1px solid black;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				var area=document.getElementById("area");
				var show=document.getElementById("show");
				area.onmousemove=function(event){
					area.style.backgroundColor="deepskyblue";
					event=event||window.event;
					show.innerHTML="x="+event.clientX+",y="+event.clientY;
				}
				area.onmouseout=function(event){
					area.style.backgroundColor="white";
				}
			}
		</script>
	</head>
	<body>
		<div id="area"></div>
		<div id="show"></div>
	</body>
</html>
